import React, { useState } from 'react';
import styles from './index.less';
import { Card, Avatar, List, Table, Button, Statistic, Radio } from 'antd';
import {
  SecurityScanOutlined,
  RiseOutlined,
  UserOutlined,
  LineChartOutlined,
  BarChartOutlined,
  PlayCircleFilled,
} from '@ant-design/icons';
import type { ColumnsType, TableProps } from 'antd/es/table';
import type { CountdownProps, RadioChangeEvent } from 'antd';
import Bar from './echarts/client.jsx';
import Top from './echarts/Top1.tsx';
const { Countdown } = Statistic;

interface DataType {
  key: React.Key;
  name: string;
  number: string;
  huishou: number;
  zhichu: number;
  status: String;
  space: number;
}

const columns: ColumnsType<DataType> = [
  {
    title: '设备名称',
    dataIndex: 'name',
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: '设备编号',
    dataIndex: 'number',
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: '本月回收次数',
    dataIndex: 'huishou',
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: '本月已支出币',
    dataIndex: 'zhichu',
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: '状态',
    dataIndex: 'status',
    sorter: (a, b) => a.name.length - b.name.length,
    render: (a) => (
      <div>
        <PlayCircleFilled
          style={{
            background: a == '运行中' ? 'green' : 'red',
            borderRadius: '50%',
            color: a == '运行中' ? 'green' : 'red',
            marginRight: '10px',
            fontSize: '10px',
          }}
        />
        {a}
      </div>
    ),
  },
  {
    title: '剩余空间',
    dataIndex: 'space',
    sorter: (a, b) => a.name.length - b.name.length,
    render: (a) => (
      <div
        style={{
          color: a > 50 ? 'green' : 'red',
        }}
      >
        {a}%
      </div>
    ),
  },
  {
    title: '操作',
    render: () => <Button type="primary">查看详情</Button>,
  },
];

const tabledata = [
  {
    key: 1,
    name: '矿大松苑自助回收机1',
    number: '95865265001',
    huishou: 44,
    zhichu: 345,
    status: '设备故障',
    space: 30,
  },
  {
    key: 2,
    name: '矿大松苑自助回收机2',
    number: '95865265002',
    huishou: 44,
    zhichu: 345,
    status: '运行中',
    space: 100,
  },
  {
    key: 3,
    name: '矿大松苑自助回收机3',
    number: '95865265003',
    huishou: 44,
    zhichu: 345,
    status: '停止回收',
    space: 0,
  },
  {
    key: 4,
    name: '矿大松苑自助回收机4',
    number: '95865265004',
    huishou: 44,
    zhichu: 345,
    status: '停止回收',
    space: 0,
  },
  {
    key: 5,
    name: '矿大松苑自助回收机5',
    number: '95865265005',
    huishou: 44,
    zhichu: 345,
    status: '停止回收',
    space: 0,
  },
  {
    key: 6,
    name: '矿大松苑自助回收机6',
    number: '95865265006',
    huishou: 44,
    zhichu: 345,
    status: '停止回收',
    space: 0,
  },
  {
    key: 7,
    name: '矿大松苑自助回收机7',
    number: '95865265003',
    huishou: 44,
    zhichu: 345,
    status: '停止回收',
    space: 0,
  },
  {
    key: 8,
    name: '矿大松苑自助回收机3',
    number: '95865265003',
    huishou: 44,
    zhichu: 345,
    status: '停止回收',
    space: 0,
  },
  {
    key: 9,
    name: '矿大松苑自助回收机3',
    number: '95865265003',
    huishou: 44,
    zhichu: 345,
    status: '停止回收',
    space: 0,
  },
  {
    key: 10,
    name: '矿大松苑自助回收机3',
    number: '95865265003',
    huishou: 44,
    zhichu: 345,
    status: '停止回收',
    space: 0,
  },
];

const onChange: TableProps<DataType>['onChange'] = (
  pagination,
  filters,
  sorter,
  extra,
) => {
  console.log('params', pagination, filters, sorter, extra);
};

const userdata = [
  {
    avater:
      'https://img1.baidu.com/it/u=2657667390,424666449&fm=253&fmt=auto?w=800&h=800',
    title: '赵金波',
    phone: '15102668927',
    state: '休息中',
  },
  {
    avater:
      'https://img1.baidu.com/it/u=2657667390,424666449&fm=253&fmt=auto?w=800&h=800',
    title: '尤自搏',
    phone: '15102668927',
    state: '回收中',
  },
  {
    avater:
      'https://img1.baidu.com/it/u=2657667390,424666449&fm=253&fmt=auto?w=800&h=800',
    title: '陈雪谊',
    phone: '15102668927',
    state: '派送中',
  },
  {
    avater:
      'https://img1.baidu.com/it/u=2657667390,424666449&fm=253&fmt=auto?w=800&h=800',
    title: '赵贺洋',
    phone: '15102668927',
    state: '回收中',
  },
];
const orderdata = [
  {
    title: '中国矿业大学南湖校区松苑1号楼',
    phone: '15102668927',
    user: 'TC_ZY',
  },
  {
    title: '中国矿业大学南湖校区松苑1号楼',
    phone: '15102668927',
    user: 'TC_ZY',
  },
  {
    title: '中国矿业大学南湖校区松苑1号楼',
    phone: '15102668927',
    user: 'TC_ZY',
  },
  {
    title: '中国矿业大学南湖校区松苑2号楼',
    phone: '15102668927',
    user: '时光若刻',
  },
  {
    title: '中国矿业大学南湖校区松苑3号楼',
    phone: '15102668927',
    user: 'TC_ZY',
  },
];
const timeonChange: CountdownProps['onChange'] = (val) => {
  if (typeof val === 'number' && 4.95 * 1000 < val && val < 5 * 1000) {
    console.log('changed!');
  }
};

export default function Home() {
  const [mode, setMode] = useState('周');
  const handleModeChange = (e: RadioChangeEvent) => {
    setMode(e.target.value);
  };
  return (
    <div className={styles.box}>
      <h1 className={styles.title}>首页</h1>
      <div className={styles.item}>
        <Card className={styles.card} style={{ width: 300 }}>
          <div className={styles.item1top}>
            <div>
              <h1>今日兑换量</h1>
              <h2>120</h2>
            </div>
            <div className={styles.r} style={{ background: '#f5484c' }}>
              <SecurityScanOutlined style={{ fontSize: 30, color: '#fff' }} />
            </div>
          </div>
          <div className={styles.item1but}>
            <div>
              <RiseOutlined style={{ color: '#2dce89' }} />
              <span className={styles.l}>3.48%</span>
            </div>
            <div style={{ color: '#999' }}>自昨日以来</div>
          </div>
        </Card>
        <Card className={styles.card} style={{ width: 300 }}>
          <div className={styles.item1top}>
            <div>
              <h1>附近用户总数</h1>
              <h2>2,354</h2>
            </div>
            <div className={styles.r} style={{ background: '#dc8738' }}>
              <UserOutlined style={{ fontSize: 30, color: '#fff' }} />
            </div>
          </div>
          <div className={styles.item1but}>
            <div>
              <RiseOutlined style={{ color: '#2dce89' }} />
              <span className={styles.l}>3.48%</span>
            </div>
            <div style={{ color: '#999' }}>自上个月以来</div>
          </div>
        </Card>
        <Card className={styles.card} style={{ width: 300 }}>
          <div className={styles.item1top}>
            <div>
              <h1>今日支出币</h1>
              <h2>924</h2>
            </div>
            <div className={styles.r}>
              <LineChartOutlined style={{ fontSize: 30, color: '#fff' }} />
            </div>
          </div>
          <div className={styles.item1but}>
            <div>
              <RiseOutlined style={{ color: '#2dce89' }} />
              <span className={styles.l}>3.48%</span>
            </div>
            <div style={{ color: '#999' }}>自上个月以来</div>
          </div>
        </Card>
        <Card className={styles.card} style={{ width: 300 }}>
          <div className={styles.item1top}>
            <div>
              <h1>门店排名</h1>
              <h2>49.65%</h2>
            </div>
            <div className={styles.r} style={{ background: '#0f88d1' }}>
              <BarChartOutlined style={{ fontSize: 30, color: '#fff' }} />
            </div>
          </div>
          <div className={styles.item1but}>
            <div>
              <RiseOutlined style={{ color: '#2dce89' }} />
              <span className={styles.l}>3.48%</span>
            </div>
            <div style={{ color: '#999' }}>自上个月以来</div>
          </div>
        </Card>
      </div>
      <div className={styles.item}>
        <Card title="门店成员" className={styles.card} style={{ width: 400 }}>
          <div className={styles.gundong}>
            <List
              itemLayout="horizontal"
              dataSource={userdata}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={<Avatar src={item.avater} />}
                    title={
                      <div>
                        <span style={{ marginRight: '30px' }}>
                          {item.title}
                        </span>
                        <span>{item.phone}</span>
                      </div>
                    }
                    description={
                      <div>
                        <PlayCircleFilled
                          style={{
                            background:
                              item.state == '休息中' ? 'green' : 'red',
                            fontSize: '10px',
                            borderRadius: '50%',
                            color: item.state == '休息中' ? 'green' : 'red',
                            marginRight: '10px',
                          }}
                        />
                        <span>{item.state}</span>
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </div>
        </Card>
        <Card title="未处理订单" className={styles.card} style={{ width: 400 }}>
          <div className={styles.gundong}>
            <List
              itemLayout="horizontal"
              dataSource={orderdata}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={
                      <div
                        style={{
                          width: '5px',
                          height: '50px',
                          background: '#5e72e4',
                        }}
                      ></div>
                    }
                    title={item.title}
                    description={
                      <div>
                        <span style={{ marginRight: '20px' }}>
                          {item.phone}
                        </span>
                        <span>{item.user}</span>
                      </div>
                    }
                  />
                  <div>
                    <Button type="primary" size="small">
                      订单处理
                    </Button>
                    <div style={{ textAlign: 'center' }}>
                      <Countdown
                        valueStyle={{ fontSize: '14px', color: 'red' }}
                        value={Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30}
                        onChange={timeonChange}
                      />
                    </div>
                  </div>
                </List.Item>
              )}
            />
          </div>
        </Card>
        <Card
          title="订单跟踪"
          className={styles.card}
          style={{ width: 400, height: 400 }}
        >
          <div className={styles.gundong}>
            <List
              itemLayout="horizontal"
              dataSource={orderdata}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={
                      <div
                        style={{
                          width: '5px',
                          height: '50px',
                          background: '#5e72e4',
                        }}
                      ></div>
                    }
                    title={item.title}
                    description={
                      <div>
                        <span style={{ marginRight: '20px' }}>
                          {item.phone}
                        </span>
                        <span>{item.user}</span>
                      </div>
                    }
                  />
                  <Button type="primary" size="small">
                    收货中
                  </Button>
                </List.Item>
              )}
            />
          </div>
        </Card>
      </div>
      <div className={styles.item}>
        <Card
          className={styles.card}
          style={{ width: 850, height: 420, background: '#172b4d' }}
        >
          <div className={styles.echtop}>
            <div className={styles.sel}>
              <Radio.Group
                onChange={handleModeChange}
                value={mode}
                style={{ marginBottom: 8 }}
              >
                <Radio.Button value="周">周</Radio.Button>
                <Radio.Button value="日">日</Radio.Button>
              </Radio.Group>
            </div>
            <Top data={mode}></Top>
          </div>
        </Card>
        <Card className={styles.card} style={{ width: 400, height: 420 }}>
          <Bar></Bar>
        </Card>
      </div>
      <div className={styles.item}>
        <Card
          title="设备监控"
          className={styles.card}
          style={{ width: 1400, height: 600 }}
        >
          <Table
            columns={columns}
            dataSource={tabledata}
            onChange={onChange}
            pagination={false}
            scroll={{
              y: 400,
            }}
          />
        </Card>
      </div>
    </div>
  );
}
